Web Application Accessibility

Who are your users?

Assistive technology

Screen readers
Braille display
Screen magnifiers
Voice control device
Built-in, software, hardware

How many users?

graph showing the numbers of internet users in different countries vs. the number of internet users with disabilities in the US

Experiencing accessibility

(or otherwise)

I'm going to be using ChromeVox to demonstrate accessibility problems and fixes throughout the next section.
ChromeVox was developed as an open source project at Google, primarily as the screen reader for Chrome OS. However, it's also available as an extension for Google Chrome, which makes a great tool for checking accessibility issues.
Just to quickly show how it works, I'm going to turn it on and go through this form. A sophisticated screen reader user will be able to do things like find the next button on the page at a keystroke, but I'm a pretty naive screenreader user and I tend to just navigate serially through the page. Being able to navigate serially through the page, however, is pretty important in determining whether each element on the page is accessible.
So, if I go through this form serially, you can hear that the screenreader announces each control, and often plays a little noise called an 'earcon'. Much like a visual icon, this helps users easily distinguish the different types of controls, in addition to the control name.

ChromeVox

Accessibility in HTML5

Overview

Use clean HTML and use standard tags whenever possible.
Provide text alternatives.
Manage focus.
Add key handlers.
Add ARIA for screen readers.

Use clean HTML and use standard tags whenever possible.

Click on this button:

Send

Use clean HTML and use standard tags whenever possible.

Click on this button:

Provide text alternatives

Use <label> on form elements.
<label for="firstname">First name:</label> <input type="text" id="firstname"/>
Use alt on images.
- Important images should have descriptive alt text.
  <img src="chart.png" alt="[description]">
- Decorative images should have blank alt text.
  <img src="bullet35648.gif" alt="">

Provide text alternatives

Use aria-label or aria-labelledby to provide text on other elements, or where <label> is insufficient.
<div tabindex="0" role="button" aria-label="Normal Speed">

<span id="label1">Delete history after</span> <input type="number" id="this" aria-labelledby="label1 this label2"> <span id="label2">days</span>

Manage focus

Something else:

Manage focus

Something else:


<button onclick="displayPopup('block');">Open Pop Up</button>

Something else: <input type="text" id="something">

<div id="custompopup" style="display:none;">

  <p>Press ok</p>

  <button id="popok" onclick="displayPopup('none');">OK</button>

</div>

<script>

function displayPopup(value) {

  document.getElementById("custompopup").style.display=value;

  document.getElementById("popok").focus();

}

</script>

Add key handlers

Use javascript event handlers to listen for relevant key events, such as arrow or enter keys.
Be sure to set the tabindex as well!
- tabindex="0" for natural tab order
- tabindex="1" or similar for manual tab order - be careful!
- tabindex="-1" for programmatic focus

Add ARIA for screen readers.

ARIA = Accessible Rich Internet Applications (WAI = Web Accessibility Initiative)
Part of the HTML5 standard
Roles, states and properties added as attributes

Something else:

ARIA roles

Click on this button:

Send

A more complex ARIA example


            <div id="stars" class="star_rating" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3">...</div>

`aria-live`

For sections of the page which are dynamically updated
May be polite or assertive


            <div id="austen" aria-live="polite"></div>

Finding accessibility problems

Tools

Accessibility Developer Tools
ChromeVox

Accessibility Developer Tools

Category	Some things we check for
Labels and Alternative Content	Images and form fields are labeled
Keyboard Accessibility	Focusable UI controls
ARIA	Valid ARIA roles
Low-vision Accessibility	Foreground/background contrast ratio
Video Accessibility	Captions and fallback content

Demo

Enter your name:

Yes, please add me to your mailing list! You may receive one email per week.

Accessibility Developer Tools & ChromeVox

Both open source. For best results use together.

Accessibility Developer Tools:
- goo.gl/8irxZ (Web Store link)
- accessibility-developer-tools.googlecode.com
ChromeVox:
- goo.gl/ddR5A (Web Store link)
- chromevox.com
- google-axs-chrome.code.google.com

Resources

Other resources and presentations: google-axs-chrome.googlecode.com
Discussion group: groups.google.com/group/axs-chrome-discuss

Who are your users?

Assistive technology

How many users?

Experiencing accessibility

(or otherwise)

ChromeVox

Accessibility in HTML5

Overview

Use clean HTML and use standard tags whenever possible.

Use clean HTML and use standard tags whenever possible.

Provide text alternatives

Provide text alternatives

Manage focus

Manage focus

Add key handlers

Add ARIA for screen readers.

`aria-hidden`

ARIA roles

A more complex ARIA example

`aria-live`

Finding accessibility problems

Tools

Accessibility Developer Tools

Demo

Accessibility Developer Tools & ChromeVox

Both open source. For best results use together.

Resources

Error: App not installed.